<template>
	<view>
		<view v-on:click="onClick">{{title}}</view>
		<button v-on:click="addClick">数值{{num}}</button>
		----绑定style----
		<view class="box" :style="{background: backcolor}" v-on:click="changeBgClick"></view>

		<view class="nav">
			<!-- 之前绑定类名的写法:class="{类名}" -->
			<view class="item" :class="navIndex==index?'acctive':''" v-for="(name,index) in navArr" :key="name.id"
				v-on:click="selectClick(index)">{{name.title}}</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "demo标题",
				num: 0,
				backcolor: "yellow",
				navIndex: 0,
				navArr: [{
						id: 1,
						title: "首页"
					},
					{
						id: 2,
						title: "介绍"
					},
					{
						id: 3,
						title: "教程"
					},
					{
						id: 4,
						title: "组件"
					}
				]
			};
		},
		/* metohds是一个对象，方法名是她的一个属性，
		这个属性的类型是function
		this代表这个vue实例对象。
		 */
		methods: {
			onClick: function() {
				this.title = "教程.."
			},
			addClick: function() {
				this.num++;
			},
			changeBgClick() {
				/* 
				   0-1随机书，比如0.11934382915553774 
				   先转为String，再截取3-6位
				 */
				let color = "#" + String(Math.random()).substring(3, 9);
				console.log(color);
				this.backcolor = color;
			},
			selectClick: function(index) {
				this.navIndex = index;
			}
		}
	}
</script>

<style lang="scss">
	.box {
		width: 200rpx;
		height: 200rpx;
		background-color: red;
	}
	.nav {
		display: flex;
		text-align: center;
		.item {
			width: 400rpx;
			height: 60rpx;
			line-height: 60rpx;
			margin-left: 10rpx;
			color: #000;
			background: #fff;
			&.acctive {
				background: #1aa034;
				color: #fff;
			}
		}
	}
</style>